<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>门店详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button
                >
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         size="small" label-position="left">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button size="small" type="success" @click="setFields">
                                    设置字段
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="名称">
                    {{ shopInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    {{ shopInfo.address }}
                </el-descriptions-item>
                <el-descriptions-item label="联系电话">
                    {{ shopInfo.contactPhone }}
                </el-descriptions-item>
                <el-descriptions-item label="营业时间">
                    {{ shopInfo.operateTime }}
                </el-descriptions-item>
                <el-descriptions-item label="标签">
                    {{ shopInfo.labels }}
                </el-descriptions-item>
                <el-descriptions-item label="点评门店UUID">
                    {{ shopInfo.dpShopUuid }}
                </el-descriptions-item>
                <el-descriptions-item label="到达路线">
                    {{ shopInfo.route }}
                </el-descriptions-item>
                <el-descriptions-item label="停车信息">
                    {{ shopInfo.parking }}
                </el-descriptions-item>
                <el-descriptions-item label="短信签名">
                    {{ shopInfo.smsSign }}
                </el-descriptions-item>
                <el-descriptions-item label="是否支持发送预定信息">
                    <el-switch
                        v-model="shopInfo.sendReserveInfoFlag"
                        @change="changeSwitch"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-descriptions-item>
                <el-descriptions-item label="是否支持在线预定">
                    <el-switch
                        v-model="shopInfo.onlineReserveStatus"
                        @change="changeSwitch"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-descriptions-item>
                <el-descriptions-item label="门店面积">
                    {{ shopInfo.square }}
                </el-descriptions-item>
                <el-descriptions-item label="员工人数">
                    {{ shopInfo.employeeNum }}
                </el-descriptions-item>
                <el-descriptions-item label="座位数量">
                    {{ shopInfo.sitsNum }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
            <el-tab-pane label="预定通知模版" name="reserveTemplate">
                <reserve-notice-template size="small"
                                         :shop-id="id"
                                         :shop-name="shopInfo.name"
                                         v-if="activeName === 'reserveTemplate'">
                </reserve-notice-template>
            </el-tab-pane>
            <el-tab-pane label="预定相册" name="reserveAlbum">
                <reserve-album size="small"
                               :shop-id="id"
                               :shop-name="shopInfo.name"
                               v-if="activeName === 'reserveAlbum'">
                </reserve-album>
            </el-tab-pane>
            <el-tab-pane label="预定发送记录" name="reserveNotice">
                <reserve-notice size="small"
                                :shop-id="id"
                                :shop-name="shopInfo.name"
                                v-if="activeName === 'reserveNotice'">
                </reserve-notice>
            </el-tab-pane>
            <el-tab-pane label="员工管理" name="employee">
                <shop-employee size="small"
                               :shop-id="id"
                               :shop-name="shopInfo.name"
                               v-if="activeName === 'employee'">
                </shop-employee>
            </el-tab-pane>
            <el-tab-pane label="桌台管理" name="sit">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>桌台区域</span>
                    </div>
                    <shop-table-area size="small"
                                     :shop-id="id"
                                     :shop-name="shopInfo.name"
                                     v-if="activeName === 'sit'">
                    </shop-table-area>
                </el-card>
                <el-divider></el-divider>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>桌台列表</span>
                    </div>
                    <shop-table size="small"
                                :shop-id="id"
                                :shop-name="shopInfo.name"
                                v-if="activeName === 'sit'">
                    </shop-table>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="在线预定规则配置" name="reserveRule">
                <reserve-rule size="small"
                              :shop-id="id"
                              :shop-name="shopInfo.name"
                              v-if="activeName === 'reserveRule'">
                </reserve-rule>
            </el-tab-pane>
            <el-tab-pane label="预定订单列表" name="reserve">
                <reserve size="small"
                         :shop-id="id"
                         :shop-name="shopInfo.name"
                         v-if="activeName === 'reserve'">
                </reserve>
            </el-tab-pane>
            <el-tab-pane label="顾客列表" name="customer">
                <customer size="small"
                          :shop-id="id"
                          :shop-name="shopInfo.name"
                          v-if="activeName === 'customer'">
                </customer>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="编辑门店信息" width="30%" :visible.sync="setFieldsDialogVisible">
            <el-form :model="setFieldsForm" label-width="120px" size="small">
                <el-form-item label="门店面积">
                    <el-input v-model="setFieldsForm.square" placeholder="门店面积"></el-input>
                    <div class="form-tips">单位平方米</div>
                </el-form-item>
                <el-form-item label="员工人数">
                    <el-input v-model="setFieldsForm.employeeNum" placeholder="员工数量"></el-input>
                </el-form-item>
                <el-form-item label="座位数量">
                    <el-input v-model="setFieldsForm.sitsNum" placeholder="座位数量"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setFieldsDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setFieldsConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getShopById, setShopFields, updateShopSwitch} from '@/api/api'
import Album from "@/component/Album";
import Customer from "@/component/Customer";
import Reserve from "@/component/Reserve";
import ReserveAlbum from "@/component/ReserveAlbum";
import ReserveNotice from "@/component/ReserveNotice";
import ReserveNoticeTemplate from "@/component/ReserveNoticeTemplate";
import ReserveRule from "@/component/ReserveRule";
import ShopEmployee from "@/component/ShopEmployee";
import ShopTableArea from "@/component/ShopTableArea";
import ShopTable from "@/component/ShopTable";

export default {
    name: "ShopDetail",
    components: {
        Customer,
        Reserve,
        ReserveRule,
        Album,
        ReserveAlbum,
        ReserveNotice,
        ReserveNoticeTemplate,
        ShopEmployee,
        ShopTableArea,
        ShopTable
    },
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 门店详情
            shopInfo: {},
            // 当前页面ID
            id: '',

            activeName: 'reserveTemplate',

            setFieldsDialogVisible: false,
            setFieldsForm: {},
        }
    },
    methods: {
        changeSwitch() {
            updateShopSwitch(this.shopInfo).then(data => {
                if (data.respCode == 1000) {
                    this.getData();
                }
            });
        },
        setFields: function () {
            this.setFieldsDialogVisible = true;
            // 深拷贝
            this.setFieldsForm = Object.assign({}, this.shopInfo);
        },
        setFieldsConfirm: function () {
            setShopFields(this.setFieldsForm).then(data => {
                if (data.respCode == 1000) {
                    this.setFieldsDialogVisible = false;
                    this.getData();
                }
            });
        },
        // 获取表格数据
        getData: function () {
            getShopById({"id": this.id}).then(data => {
                this.shopInfo = data.body;
                this.condition.search.shopId = this.shopInfo.id;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
